<template>
    <wxc-tab-page ref="wxc-tab-page"
                  :tab-titles="tabTitles"
                  :tab-styles="tabStyles"
                  title-type="icon"
                  :tab-page-height=" contentHeight"
                  @wxcTabPageCurrentTabSelected="wxcTabPageCurrentTabSelected">
        <div class="scroller" :style="{height:contentHeight - tabStyles.height + 'px'}"
             v-for="(item,index) in contentList" :key="'title'+index" >
            <scroller v-if="currentPage ===index && item" class="scroller" :style="{height:contentHeight - tabStyles.height + 'px'}">
                <bar-slider :spread="spread" v-for="(spread, spreadIndex) in item.spread"
                            :key="'bar-slider'+ index+ spreadIndex"  v-if="item.spread"></bar-slider>
                <city-item v-for="(temp, tempIndex) in item.nodes" :content="temp"
                               :key="'city-item'+ index+ tempIndex" v-if="item.nodes"></city-item>
            </scroller>
        </div>
    </wxc-tab-page>
</template>

<style scoped>
    .tab-page{
        width: 750px;
        padding-left: 20px;
        padding-right: 20px;
    }
    .flex{
        flex: 1;
    }
    .scroller{
        width: 750px;
    }
    .item-container {
        width: 750px;
        background-color: #f2f3f4;
    }

    .border-cell {
        background-color: #f2f3f4;
        /*width: 750px;*/
        height: 24px;
        align-items: center;
        justify-content: center;
        border-bottom-width: 1px;
        border-style: solid;
        border-color: #e0e0e0;
    }

    .cell {
        background-color: #ffffff;
    }

    .content {
        /*width:750px;*/
        height: 140px;
        border-bottom-width: 1px;
        align-items: center;
        justify-content: center;
    }

    .tab-page-wrapper {
        flex-direction: row;
    }

    .row {
        flex-direction: row;
    }

    .left-list {
        width: 200px;
    }

    .right-list {
        /*flex: 1;*/
        width: 550px;
    }
    .left-active{
        background-color: rgba(0,0,0, .05);
    }
    .left-text{
        padding-left: 30px;
    }
    .left-text-active{
        border-left-style: solid;
        border-left-width: 4px;
        border-left-color: #d81e06;
    }
</style>
<script>
    const dom = weex.requireModule('dom');
    import {WxcTabPage} from 'weex-ui';

    import Config from './BookCityConfig'
    import {book_store} from '../../store/actions'
    import BookList from '../search/BookList';
    import BarSlider from './BarSlider';
    import CityItem from './CityItem';

    export default {
        components: {WxcTabPage, BookList, BarSlider, CityItem},
        props: {
            contentHeight: {
                type: Number,
                default: 1334
            }
        },
        data: () => ({
            tabTitles: Config.tabIconFontTitles,
            tabStyles: Config.tabIconFontStyles,
            //右边的内容,
            contentList:[],
            currentPage:0,
            isShow: false,
        }),
        created() {
            // this. contentHeight = this.contentHeight;
            for(let i=0;i<this.tabTitles.length;i++){
                this.contentList.push(undefined)
            }
            this.getContent(this.currentPage)
        },
        mounted(){
        },
        computed:{

        },
        methods: {
            getContent(page){
                this.$emit('changLoading',{isShow: true});
                book_store({
                    params:{
                        select: page,
                    },
                    callback: data => {
                        this.$set(this.contentList, page, data.data)
                        console.log(this.contentList[page].spread.title);
                    },
                    after: ()=>{
                        this.$emit('changLoading',{isShow: false});
                    }
                })
            },
            wxcTabPageCurrentTabSelected(e) {
                const self = this;
                let page = e.page;
                this.currentPage = page;
                console.log(this.currentPage);
                if( !this.contentList[page]){
                    this.getContent(page)
                }
            },
        }
    };
</script>